<template>
  <div class="p-3">
    <d-table
      ref="table"
      row-key="userId"
      :params="formData"
      :columns="columns"
      api="system/user/list"
      :hasColumnControl="false"
    >
      <template #topContent>
        <t-form class="table-form" :data="formData" layout="inline" @submit="getData">
          <t-form-item label="姓名">
            <t-input v-model="formData.nickName" placeholder="搜索姓名" clearable></t-input>
          </t-form-item>
          <t-form-item label="手机号码">
            <t-input v-model="formData.phonenumber" placeholder="搜索手机号码" clearable></t-input>
          </t-form-item>
          <t-form-item label="创建时间">
            <d-range-picker
              allow-input
              clearable
              v-model:beginTime="formData.beginTime"
              v-model:endTime="formData.endTime"
            />
          </t-form-item>
          <t-button type="submit">搜索</t-button>
          <t-button v-auth="'system:user:add'" class="ml-3" @click="handleEdit()"
            >新增账号</t-button
          >
        </t-form>
      </template>
      <template #websiteList="{ row }">
        <t-tag class="mr-2" v-for="(item, index) in row.websiteList" :key="index">{{
          item.websiteName
        }}</t-tag>
      </template>
      <template #operation="{ row }">
        <t-link
          v-if="!row.admin"
          v-auth="'system:user:edit'"
          theme="primary"
          hover="color"
          @click="handleEdit(row)"
        >
          编辑
        </t-link>
        <t-link
          v-if="!row.admin"
          v-auth="'system:user:resetPwd'"
          class="ml-2"
          theme="primary"
          hover="color"
          @click="handleReset(row)"
        >
          重置密码
        </t-link>
        <d-pop-btn
          v-if="!row.admin"
          v-auth="'system:user:edit'"
          class="ml-2"
          :theme="row.status == 0 ? 'danger' : 'primary'"
          :tips="`是否确认${row.status == 0 ? '禁用' : '启用'}该用账号？`"
          @click="handleEnable(row)"
          >{{ row.status == 0 ? '禁用' : '启用' }}</d-pop-btn
        >
      </template>
    </d-table>
    <add ref="dialog" @success="getData" />
    <reset :api="'system/user/resetPwd'" ref="resetDialog" />
  </div>
</template>

<script setup lang="jsx">
import add from './add.vue'
import reset from './reset.vue'
import { ref, computed } from 'vue'
import { put } from '@common'
import { useDict } from '@/store/dict'
import { useMember } from '@/store/member'
import { MessagePlugin } from 'tdesign-vue-next'
const table = ref(null)
const formData = ref({})
const dialog = ref(false)
const resetDialog = ref()
const dict = useDict()
const member = useMember()
const statusList = computed(() => {
  return dict.dict_enable_list
})
const columns = computed(() => {
  return [
    { title: '序号', colKey: 'dIndex', width: 60 },
    { title: '姓名', colKey: 'nickName', width: 110 },
    { title: '登录账号', colKey: 'userName', width: 120 },
    { title: '邮箱', colKey: 'email', width: 200, ellipsis: true },
    { title: '手机号码', colKey: 'phonenumber', width: 120 },
    { title: '部门', colKey: 'dept.deptName', width: 110 },
    // {
    //   title: '状态',
    //   colKey: 'status',
    //   width: 80,
    //   cell: (_, { row }) => {
    //     const { status } = row
    //     return <d-status list={statusList.value} value={status} />
    //   }
    // },
    { title: '最后登录时间', colKey: 'loginDate', width: 170 },
    { title: '创建时间', colKey: 'createTime', width: 170 },
    { title: '操作', colKey: 'operation', width: 150, fixed: 'right' }
  ]
})
const getData = async () => {
  table.value.getData()
}
const handleEdit = (row) => {
  dialog.value.show(row)
}
const handleReset = (row) => {
  resetDialog.value.show(row)
}
const handleEnable = async (item) => {
  await put(`system/user/changeStatus/${item.userId}/${1 - item.status}`)
  MessagePlugin.success('编辑成功')
  getData()
}
</script>
